<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Single File Upload with Additional Data</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Single File Upload with Additional Data</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example extends the single file upload example and shows how to submit GET and POST variables along with the file upload request, and how to receive data from the server.</p>

<p><strong>Please note:</strong> This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there. </p>
<p><strong>Also note:</strong> The uploader is not supported on iOS devices (iPhone and iPad), because Flash player is not available on that system. This example will not function on such devices.</p>
</div>

<div class="example yui3-skin-sam">
    <style type="text/css">
    .uploadButton a {
        display:block;
        width:100px;
        height:40px;
        text-decoration: none;
    }

    .uploadButton a {
        background: url("../assets/uploader/uploadFileButton.png") 0 0 no-repeat;
    }

    .uploadButton a:visited {
        background-position: 0 0;
    }

    .uploadButton a:hover { 
        background-position: 0 -40px;
    }

    .uploadButton a:active {
        background-position: 0 -80px;
    }
</style>

<div id="selectButton" style="width:100px;height:40px"></div> 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>

<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>
<div>Sending via GET: foo='bar', foo1='bar1'</div>
<div>Sending via POST: bar='bazz', bar1='bazz1'</div>
<div id="result">Data returned from the server:</div>

<script>

YUI({filter:"raw"}).use('uploader', function (Y) {

var swfURL = Y.Env.cdn + "uploader/assets/uploader.swf";

if (Y.UA.ie >= 6) {
    swfURL += "?t=" + Y.guid();
}

var uploader = new Y.Uploader({boundingBox:"#selectButton", 
                               buttonSkin:"../assets/uploader/selectFileButton.png",
                               transparent: false,
                               swfURL: swfURL
                               });  

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
uploader.on("uploadcompletedata", uploadCompleteData);

Y.one("#uploadButtonLink").on("click", uploadFile);


function setupUploader (event) {
    uploader.set("multiFiles", false);
    uploader.set("log", true);
    
    var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
                       {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
    
    uploader.set("fileFilters", fileFilters);
}


function fileSelect (event) {
    var fileData = event.fileList;  

    for (var key in fileData) {
        var output = "File selected: " + fileData[key].name;
        Y.one("#filename").setContent(output);
    }
}

function updateProgress (event) {
    Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}

function uploadComplete (event) {
    Y.one("#percent").setContent("Upload complete!");
}

function uploadCompleteData (event) {
    Y.one("#result").setContent("Data returned from the server:<br>" + event.data);
}

function uploadFile (event) {
    uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
}


});

</script>
</div>

<h2>Adding Functionality to Simple File Upload</h2>

<p>Please read the "Simple File Upload" example tutorial first, since this example builds on top of it.</p>

<h2>Additional UI</h2>
<p>In addition to the UI for selecting files, uploading them, and reporting on the upload progress, add the container to output the data returned from the server:</p>

<pre class="code prettyprint">&lt;div id=&quot;result&quot;&gt;Data returned from the server:&lt;&#x2F;div&gt;</pre>


<h2>Event Binding for <code>uploadcompletedata</code></h2>
<p>When declaring uploader event bindings, add a handler for the <code>uploadcompletedata</code> event, which carries the output returned by the server:</p>

<pre class="code prettyprint">uploader.on(&quot;uploadcompletedata&quot;, uploadCompleteData);</pre>


<h2>Handling <code>uploadcompletedata</code></h2>
<p>Add a handler for the <code>uploadcompletedata</code> event. In the handler, set the content of the <code>result</code> container to the server's response to the request, carried in the event payload:</p>

<pre class="code prettyprint">function uploadCompleteData (event) {
	Y.one(&quot;#result&quot;).setContent(&quot;Data returned from the server:&lt;br&gt;&quot; + event.data);
}</pre>


<h2>Change Upload Method</h2>
<p>Finally, modify the <code>uploadAll()</code> method call to specifically set the variable transmission method to POST and to add the variables to be carried in the POST request:</p>

<pre class="code prettyprint">function uploadFile (event) {
	uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload.php?foo=bar&amp;foo1=bar1&quot;, &quot;POST&quot;, {bar:&quot;bazz&quot;, bar1:&quot;bazz1&quot;});
}</pre>


<h2>Full Source Code For this Example</h2>

<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;
    .uploadButton a {
        display:block;
        width:100px;
        height:40px;
        text-decoration: none;
    }

    .uploadButton a {
        background: url(&quot;..&#x2F;assets&#x2F;uploader&#x2F;uploadFileButton.png&quot;) 0 0 no-repeat;
    }

    .uploadButton a:visited {
        background-position: 0 0;
    }

    .uploadButton a:hover { 
        background-position: 0 -40px;
    }

    .uploadButton a:active {
        background-position: 0 -80px;
    }
&lt;&#x2F;style&gt;

&lt;div id=&quot;selectButton&quot; style=&quot;width:100px;height:40px&quot;&gt;&lt;&#x2F;div&gt; 
&lt;div class=&quot;uploadButton&quot;&gt;&lt;a href=&quot;#&quot; id=&quot;uploadButtonLink&quot;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;div&gt;

&lt;div id=&quot;filename&quot;&gt;
File selected:
&lt;&#x2F;div&gt;
&lt;div id=&quot;percent&quot;&gt;
Percent uploaded:
&lt;&#x2F;div&gt;
&lt;div&gt;Sending via GET: foo=&#x27;bar&#x27;, foo1=&#x27;bar1&#x27;&lt;&#x2F;div&gt;
&lt;div&gt;Sending via POST: bar=&#x27;bazz&#x27;, bar1=&#x27;bazz1&#x27;&lt;&#x2F;div&gt;
&lt;div id=&quot;result&quot;&gt;Data returned from the server:&lt;&#x2F;div&gt;

&lt;script&gt;

YUI({filter:&quot;raw&quot;}).use(&#x27;uploader&#x27;, function (Y) {

var swfURL = Y.Env.cdn + &quot;uploader&#x2F;assets&#x2F;uploader.swf&quot;;

if (Y.UA.ie &gt;= 6) {
    swfURL += &quot;?t=&quot; + Y.guid();
}

var uploader = new Y.Uploader({boundingBox:&quot;#selectButton&quot;, 
                               buttonSkin:&quot;..&#x2F;assets&#x2F;uploader&#x2F;selectFileButton.png&quot;,
                               transparent: false,
                               swfURL: swfURL
                               });  

uploader.on(&quot;uploaderReady&quot;, setupUploader);
uploader.on(&quot;fileselect&quot;, fileSelect);
uploader.on(&quot;uploadprogress&quot;, updateProgress);
uploader.on(&quot;uploadcomplete&quot;, uploadComplete);
uploader.on(&quot;uploadcompletedata&quot;, uploadCompleteData);

Y.one(&quot;#uploadButtonLink&quot;).on(&quot;click&quot;, uploadFile);


function setupUploader (event) {
    uploader.set(&quot;multiFiles&quot;, false);
    uploader.set(&quot;log&quot;, true);
    
    var fileFilters = new Array({description:&quot;Images&quot;, extensions:&quot;*.jpg;*.png;*.gif&quot;},
                       {description:&quot;Videos&quot;, extensions:&quot;*.avi;*.mov;*.mpg&quot;}); 
    
    uploader.set(&quot;fileFilters&quot;, fileFilters);
}


function fileSelect (event) {
    var fileData = event.fileList;  

    for (var key in fileData) {
        var output = &quot;File selected: &quot; + fileData[key].name;
        Y.one(&quot;#filename&quot;).setContent(output);
    }
}

function updateProgress (event) {
    Y.one(&quot;#percent&quot;).setContent(&quot;Percent uploaded: &quot; + Math.round((100 * event.bytesLoaded &#x2F; event.bytesTotal)) + &quot;%&quot;);
}

function uploadComplete (event) {
    Y.one(&quot;#percent&quot;).setContent(&quot;Upload complete!&quot;);
}

function uploadCompleteData (event) {
    Y.one(&quot;#result&quot;).setContent(&quot;Data returned from the server:&lt;br&gt;&quot; + event.data);
}

function uploadFile (event) {
    uploader.uploadAll(&quot;http:&#x2F;&#x2F;www.yswfblog.com&#x2F;upload&#x2F;upload.php?foo=bar&amp;foo1=bar1&quot;, &quot;POST&quot;, {bar:&quot;bazz&quot;, bar1:&quot;bazz1&quot;});
}


});

&lt;&#x2F;script&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to upload a single file, while tracking progress and using a sprite-skinned button">
                                        <a href="uploader-simple.html">Simple Uploader with Progress Tracking</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to upload a single file, along with GET and POST Vars Submission and receive data from the server">
                                        <a href="uploader-withvars.html">Single File Upload with Additional Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to upload multiple files with progress tracking and a transparent overlay upload button">
                                        <a href="uploader-multiple.html">Multiple Files Upload with Transparent Overlay Button</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
